<template>
  <div class="konwledgePoints-box .app-container">
    <div class="container-card" v-for="(item, index) in showList" :key="index">
      <h3>{{ item.label }}<i class="iconfont icon-wancheng1" /></h3>
      <div class="list">
        <div class="item" v-for="(list, ind) in item.list" :key="ind" @click="toDetail(list)">
          {{ list.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ComponentInternalInstance,
    getCurrentInstance,
    reactive,
    toRefs,
    onMounted
  } from 'vue'
  import { useRouter } from 'vue-router'

  export default defineComponent({
    components: {},
    props: {},
    setup(props) {
      const _router = useRouter()
      const { proxy, appContext } = getCurrentInstance() as ComponentInternalInstance
      // #region 变量
      const state = reactive({
        showList: [
          {
            label: 'TS声明',
            list: [
              { label: 'tsType', path: 'tsType', name: 'test-tsType' },
              { label: 'tsTypeSuper', path: 'tsTypeSuper', name: 'test-tsTypeSuper' }
            ]
          }
        ]
      })
      // #endregion

      // #region 生命周期、监听、计算 函数
      onMounted(() => {
        console.log(props, proxy, appContext, state)
      })
      // #endregion

      // #region 页面操作方法

      const toDetail = item => {
        _router.push({
          path: item.path
        })
      }
      // #endregion

      return {
        ...toRefs(state),
        toDetail
      }
    }
  })
</script>

<style lang="less" scoped>
  .konwledgePoints-box {
    .container-card {
      h3 {
        i {
          margin-left: 12px;
          font-size: 16px;
          color: #565656;
        }
      }
    }
    .list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .item {
        padding: 5px 8px;
        margin-right: 20px;
        border: 1px solid #ebebeb;
        border-radius: 6px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        cursor: pointer;
        &:hover {
          box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
          color: yellowgreen;
        }
      }
    }
  }
</style>
